<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
    </tbody>
  </table>
  <script>

    const initData = [
      {
        stuId: 1001,
        uname: '欧阳霸天',
        age: 19,
        gender: '男',
        salary: '20000',
        city: '上海',
      }
    ]
    // localStorage.setItem('data', JSON.stringify(initData))
    // 1.渲染业务  1.1先读取本地存储的数据
    // （1）存储数据再转化为对象然后存到变量里面，后期用于渲染页面
    //如果没有数据则用空数组来代替
    const arr = JSON.parse(localStorage.getItem('data')) || []
    console.log(arr);
    const tbody = document.querySelector('tbody')

    // 1.2利用map和join方法来渲染页面
    function render() {//这样写ele.uname 是因为数组中只有一个元素，所以不用加上index
      const trArr = arr.map(function (ele, index) {
        return `
        <tr>
          <td>${ele.stuId}</td>
          <td>${ele.uname}</td>
          <td>${ele.age}</td>
          <td>${ele.gender}</td>
          <td>${ele.salary}</td>
          <td>${ele.city}</td>
          <td>
            <a href="javascript:" data-id=${index}>删除</a>
          </td>
        </tr> 
        `
      })
      console.log(trArr);//打印出来的是数组里的内容

      // (2)把数组转换为字符串 join   不理解为什么不可以trArr[i]
      tbody.innerHTML = trArr.join('') //如果有多个元素就会直接输出几个tr


    }

    render()
    // 2.新增业务
    // 2.1form表单注册提交事件，阻止默认行为
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    info.addEventListener('submit', function (e) {
      e.preventDefault()//阻止表单提交跳转页面
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      // 2.2给arr数组追加对象，里面储存表单获取过来的数据
      arr.push({//优化stuId 真是第一个选项 假是第二个选项
        stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
      })
      render()
      this.reset()//重置表单
      //新增的存储进去 转换为json字符串存储
      localStorage.setItem('data', JSON.stringify(arr))
    })

    // 3.删除业务
    // 3.1采用事件委托形式，给tbody注册点击事件
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        if (confirm('确定删除吗？')) {
          //3.2根据索引号，利用splice删除数组这条数据
          arr.splice(e.target.dataset.id, 1)
          // 3.3重新渲染页面
          render()
          //3.4 把最新arr数组存入本地存储
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }
    })
  </script>
</body>

</html>